<template>
    <div>
        <van-loading size="30" style="text-align: center; width: 50px; height: 50px; margin: 0 auto;"  v-if="list.length==0"/>
        <ul class="search-list" v-else>
            <li v-for="(item,index) in list" :key="index" @click="history(item.articleId)"><van-icon name="search" style="padding: 0 10px;"/>{{item.title}}</li>
        </ul>
    </div>
</template>

<script>
    import {listNews} from "../api/api";

    export default {
        name: "searchInfo",
        props:["text"],
        data(){
          return{
              list:[],
              historylist:[]

          }
        },
        created() {
            this.historylist = JSON.parse(localStorage.getItem("his"))||[];
            listNews(1,47660,"",this.text).then(res=>{
                // console.log(res);
                this.list = res.rows;
            })
        },
        methods:{
          history(id){
                if(!this.historylist.some(item=>item==this.text&&this.text!="")){
                    this.historylist.push(this.text);
                    localStorage.setItem("his",JSON.stringify(this.historylist))
                }
              this.$router.push("/RotateDeatil?articleId="+id);
          },

        },
        computed:{

        }
    }
</script>

<style lang="less" scoped>
.search-list{
    padding: 10px;
    li{
        padding: 5px;
        margin: 5px 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-bottom: 1px solid #eaeaea;

    }
}
</style>